<template>
  <div class="container">
    <div>动态路由加载成功</div>
    <div class="map">
      <!-- 在左侧加载地图 -->
      <MAP :longitude="longitude" :latitude="latitude" />
      <BusinessAsideNav></BusinessAsideNav>
    </div>
  </div>
</template>

<script setup>
import MAP from '@/components/GPS/components/Satellite/index.vue'; // 引入地图组件
import BusinessAsideNav from '@/components/BusinessAsideNav/index.vue'
import { inject, ref, watch } from 'vue';
import useOperationStore from '@/store/operation';

// 切换业务的数据对接处理
let operationStore=useOperationStore()
let operationId = ref(operationStore.data.length>0?operationStore.data[operationStore.index].id:'')
let latitude=ref(operationStore.data.length>0?operationStore.data[operationStore.index].latitude:null)
let longitude=ref(operationStore.data.length>0?operationStore.data[operationStore.index].longitude:null)
let operationName=ref(operationStore.data.length>0?operationStore.data[operationStore.index].Name:null)
operationStore.$subscribe(async(mutation, state)=>{
  operationId.value=operationStore.data[operationStore.index].id
  operationName.value=operationStore.data.length>0?operationStore.data[operationStore.index].Name:null
  latitude.value=operationStore.data.length>0?operationStore.data[operationStore.index].latitude:null
  longitude.value=operationStore.data.length>0?operationStore.data[operationStore.index].longitude:null
})

</script>

<style lang="scss" scoped>
.container {
  border-radius: 10px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between; /* 控制子元素的排列 */
  flex: 1; /* 父容器占满可用空间 */
  width: 100%; /* 确保父容器的宽度为100% */
  height: 100%; /* 让父容器的高度为视口高度 */

  .map {
    flex: 1; /* 动态占用剩余空间 */
    height: 100%; /* 高度占满父容器 */
    border: 1px solid #ccc;
    border-radius: 8px;
    position: relative;
  }
}
</style>
